<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>文章列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" width="130" />
            <el-table-column prop="username" label="用户名" width="130" />
            <el-table-column prop="fullname" label="姓名" width="130" />
            <el-table-column prop="sex" label="性别" width="130" />
            <el-table-column prop="tel" label="手机" width="130" />
            <el-table-column prop="email" label="邮箱" width="130">
            </el-table-column>
            <el-table-column prop="avatar" label="头像" width="130">
                <template #default="scope">
                    <el-avatar :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="role_name" label="角色" width="130"><template #default="scope">
                    <el-tag>{{scope.row.role_name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-space>
                        <el-link :href="`/#/admin/edit/${scope.row.id}`">
                            <el-button type="primary" icon="edit" plain size="small">
                                编辑
                            </el-button>
                        </el-link>
                        <el-button @click="handleRemove(scope.row.id,scope.$index)" type="danger" plain edit="icon"
                            size="small">
                            删除
                        </el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
import Admin from '@/api/Admin';


import { ref, reactive, onMounted, onUpdated } from 'vue';
let tableData = ref([

]);//加载列表
async function loadList() {
    let { status, msg, total, data } = await Admin.list();
    if (status) {
        tableData.value = data; console.log(tableData)

    }

}
loadList();

// 删除操作
function handleRemove( id,index) {
    // confirm弹窗
    ElMessageBox.confirm(
        '确定要删除此账户吗？',
        '确认删除',
        {
            type: 'error',
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        })
        // 确认
        .then(async () => {
            // 先发送ajax，成功后操作DOM进行删除
            let { status, msg } = await Admin.remove({ id });
            if (status) {
                // 删除成功
                ElMessage.success(msg);
                // 操作DOM
                tableData.value.splice(index, 1);
            } else {
                ElMessage.error(msg);
            }
            // console.log('确认');
        })
        // 取消
        .catch(() => {
            ElMessage('取消成功！')
        });
    // console.log(index, row);
}


</script>
<style>

</style>